<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      type="text/javascript"
      src="../lib/include-lib.js"
      libpath="../lib/"
      include="jquery,jquery.minicolors,jquery.range,font-awesome,layer,haoutil,turf,mars3d,mars3d-heatmap,toastr"
    ></script>
    <title>高凌</title>
    <title>高凌噪声平台</title>
    <link rel="stylesheet" type="text/css" href="res/css/font.css" />
    <link rel="stylesheet" type="text/css" href="res/css/style.css" />
    <link rel="stylesheet" type="text/css" href="res/css/screen6.css" />
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <div class="loading"></div>
    <div class="paraSelect-area">
      <form class="para-select" action="">
        <select name="streetOption" id="streetOption">
          <option value="">选择点位源数据</option>
          <option value="petitionListData">投诉点位</option>
          <option value="industryPointListData">工业噪声站点</option>
          <option value="livePointListData">社会生活站点</option>
          <option value="functionAreaData">功能区区域划分</option>
          <option value="builidPointListData">建筑工地站点</option>
          <option value="trafficPointListData">交通噪声站点</option>
          <option value="memsPointListData">辅助点位</option>
          <option value="monitorSourceListData">监测源数据</option>
          <option value="functionPointListData">功能区站点</option>
          <option value="sensitiveInfoData.pointList">敏感点位</option>
          <option value="sensitiveInfoData.sensitiveArea">敏感区域</option>
        </select>
      </form>
      <form class="para-select" action="">
        <select name="roadOption" id="roadOption">
          <option value="">选择噪声热力图数据</option>
          <!-- <option value="r_jamindexavg">路段平均拥堵指数</option>
          <option value="r_jamindexmorning">路段早高峰拥堵指数</option>
          <option value="r_jamindexnight">路段晚高峰拥堵指数</option>
          <option value="r_jamindexnormal">路段高峰期拥堵指数</option> -->
        </select>
      </form>
    </div>
    <!-- <div class="iframeBox"> -->

    <!-- <iframe src="https://cn.bing.com/?mkt=zh-cn" frameborder="0"></iframe> -->

    <div class="csps-center">
      <!-- 3D map  -->
      <div class="map3D">
        <!-- 3D map -->
        <div
          id="mars3dContainer"
          class="mars3d-container"
          style="z-index: 999"
        ></div>
      </div>
      <!-- compass -->
      <!-- <div class="csps-compass"></div> -->
      <!-- zoom -->
      <!-- legend -->
      <!-- 按钮 -->
      <div class="csps-center-btns">
        <a
          href="javascript:viewModeChange2();"
          class="csps-icon csps-icon-1 active"
        >
          <i></i>
          2D/3D
        </a>
        <a href="javascript:goHome();" class="csps-icon csps-icon-2">
          <i></i>
          初始视图
        </a>
      </div>
      <!-- </div> -->
    </div>


    
    <div class="mainBox">
      <!-- 顶部盒子 -->
      <div class="maintop">
        <div class="maintopL">
          <div class="tit">2020/06/01</div>
          <div class="bs"></div>
          <div class="tit">10:44:21</div>
          <div class="bs"></div>
          <div class="tq">
            <img src="./img/index/tq1.png" alt="" />
            <span>32℃</span>
          </div>
        </div>
        <div class="maintopC">城市噪声污染防控平台-DEMO</div>
        <div class="maintopR">
          <img src="./img/index/rr1.png" alt="" />
          <img src="./img/index/rr2.png" alt="" />
          <img src="./img/index/rr3.png" alt="" />
          <div class="bs"></div>
          <div class="user">User</div>
        </div>
      </div>

      <div class="main">
        <!-- 左边盒子 -->
        <div class="mainLeft">
          <div class="mainLeftOne">
            <div class="titt">
              <span>香洲区宁静指数</span>
              <span class="tittTime">更新至2022-02-03</span>
            </div>
            <div class="box1">
              <!-- 第一个echarts盒子 -->
              <div class="box1ll">
                <div class="box1ZT">良好</div>
                <div class="box1Day">昨天</div>
                <div class="box1DayNum">今年累计宁静指数：<span>94</span></div>
                <div id="echBox1"></div>
              </div>
              <div class="box1rr">
                <div class="box1SeaTime">
                  <span class="active">昨天</span>
                  <span>今年累计</span>
                </div>
                <div class="box1XianBai">
                  <div class="box1XianBai1">
                    <div class="row">
                      <span>质量指数</span>
                      <span>1.53</span>
                    </div>
                    <div class="box1Xian">
                      <div class="box1XianS1"></div>
                    </div>
                  </div>
                  <div class="box1XianBai2">
                    <div class="row">
                      <span>污染指数</span>
                      <span>2.31</span>
                    </div>
                    <div class="box1Xian">
                      <div class="box1XianS2"></div>
                    </div>
                  </div>
                  <div class="box1XianBai3">
                    <div class="row">
                      <span>投诉指数</span>
                      <span>3.12</span>
                    </div>
                    <div class="box1Xian">
                      <div class="box1XianS3"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="mainLeftTow">
            <div class="titt">
              <span>镇街排名分析</span>
            </div>
            <!-- 第二个echarts盒子 -->
            <div class="box2ll">
              <div id="echBox2"></div>
              <div class="box2BS">
                <div class="box2BSRow" biaoshi="1"></div>
                <span biaoshi="1">一级，优秀</span>
                <div class="box2BSRow" biaoshi="2"></div>
                <span biaoshi="2">二级，良好</span>
                <div class="box2BSRow" biaoshi="3"></div>
                <span biaoshi="3">三级，一般</span>
                <div class="box2BSRow" biaoshi="4"></div>
                <span biaoshi="4">四级，预警</span>
              </div>
            </div>
          </div>
          <div class="mainLeftThree">
            <div class="titt">
              <span>噪声实时监测概况</span>
              <span class="tittTime">更新至2022-02-03</span>
            </div>
            <div class="box3">
              <div class="box3ll">
                <div class="box3llTop">声功能区</div>
                <div class="box3llRow">
                  <p>总点位数</p>
                  <div>
                    <div class="xian xian1"></div>
                    <span>6</span>
                  </div>
                </div>
                <div class="box3llRow">
                  <p>达标</p>
                  <div>
                    <div class="xian xian2"></div>
                    <span>3</span>
                  </div>
                </div>
                <div class="box3llRow">
                  <p>超标</p>
                  <div>
                    <div class="xian xian3"></div>
                    <span>2</span>
                  </div>
                </div>
                <div class="box3llRow">
                  <p>无效</p>
                  <div>
                    <div class="xian xian4"></div>
                    <span>1</span>
                  </div>
                </div>
              </div>
              <div class="box3rr">
                <div class="box3rrTop">敏感建筑集中区域</div>
                <!-- 第三个echarts盒子 -->
                <div id="echBox3"></div>
                <div class="box3Txt">
                  <p>
                    平均等效声级<span>60.5dB</span>&emsp;&emsp;&emsp;总体
                    <span>一般</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右边盒子 -->
        <div class="mainRight">
          <img src="./img/index/leftPanel.png" alt="" />
        </div>
      </div>
    </div>
  </body>
  <script src="./js/jQuery.js"></script>
  <script src="./js/echarts.min.js"></script>
  <script src="res/js/tmpl.js"></script>
  <script src="res/js/area_data.js"></script>
  <script src="res/js/street_data.js"></script>
  <script src="res/js/js.js"></script>
  <!-- 大屏6相关js -->
  <script src="res/js/screen6.js"></script>
  <!--第三方lib-->
  <script src="./js/common.js"></script>
  <!-- cesium mars 3d -->
  <script src="./res/js/pku3d.js"></script>
  <script src="./res/js/pku3dModel.js"></script>
  <script src="./res/js/pku3dZone.js"></script>
  <script src="./res/js/pku3dStreet.js"></script>
  <script>
    // 第一个echarts
    let ecDemo1 = echarts.init(document.getElementById("echBox1"));
    let option1 = {
      series: [
        {
          type: "gauge",
          pointer: {
            show: false,
          },
          itemStyle: {
            color: "#37F4E9",
          },
          progress: {
            show: true,
            width: 5,
          },
          axisLine: {
            lineStyle: {
              width: 5,
              color: [[1, "rgba(255,255,255,.2)"]],
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          anchor: {
            show: false,
          },
          title: {
            show: false,
          },
          detail: {
            color: "#fff",
            valueAnimation: true,
            fontSize: 20,
            offsetCenter: [0, -15],
          },
          data: [
            {
              value: 70,
            },
          ],
        },
      ],
    };
    ecDemo1.setOption(option1);
    // 第二个echarts
    let ecDemo2 = echarts.init(document.getElementById("echBox2"));
    let option2 = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        data: ["Expenses", "Income"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: [
            "南屏",
            "凤山",
            "前山",
            "湾仔",
            "翠香",
            "狮山",
            "吉大",
            "前山",
            "梅华",
            "拱北",
          ],
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.2)",
            },
          },
          axisTick: {
            //x轴刻度线
            show: false,
          },
          axisLabel: {
            textStyle: {
              show: true,
              fontFamily: "微软雅黑",
              color: "#fff",
              fontSize: "12",
            },
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.2)",
            },
          },
          axisLabel: {
            textStyle: {
              show: true,
              fontFamily: "微软雅黑",
              color: "#fff",
              fontSize: "12",
            },
          },
        },
      ],

      series: [
        {
          // 柱状图逆序
          // realtimeSort: true,
          name: "",
          type: "bar",
          itemStyle: {
            normal: {
              //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
              color: function (params) {
                let temp = "#37F4E9";
                if (params.value > 25) temp = "#FFE459";
                if (params.value > 50) temp = "#FF9A3E";
                if (params.value > 75) temp = "#FF4949";
                return temp;
              },
            },
          },
          barWidth: "60%",
          data: [20, 20, 50, 80, 70, 10, 30, 50, 70, 90],
        },
      ],
    };
    ecDemo2.setOption(option2);
    // 第三个echarts
    let ecDemo3 = echarts.init(document.getElementById("echBox3"));
    let option3 = {
      color: ["#0783FA", "#37F4E9", "#FFE459", "#FF9A3E", "#FF4949"],
      tooltip: {
        trigger: "item",
        show: false,
      },
      legend: {
        orient: "vertical",
        right: 10,
        top: 10,
        textStyle: {
          color: "#fff",
          fontSize: "12",
        },
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["70%", "90%"],
          center: ["40%", "50%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
            formatter: "{b}：{c}",
            fontSize: 12,
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "14",
              color: "#fff",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: 12,
              name: "好",
            },
            {
              value: 20,
              name: "较好",
            },
            {
              value: 15,
              name: "一般",
            },
            {
              value: 30,
              name: "较差",
            },
            {
              value: 8,
              name: "差",
            },
          ],
        },
      ],
    };
    ecDemo3.setOption(option3);
    // 第四个echarts
  </script>
</html>
